<%--
  Created by IntelliJ IDEA.
  User: CHENCO7
  Date: 8/13/2017
  Time: 3:21 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Order Page</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="css/comment.css" type="text/css"/>
    <link rel="stylesheet" href="css/orderPage.css" type="text/css"/>

</head>
<body>

<div id="main-div">
    <!-- 上方标题-->
    <div class="top-title">
        <div class="dole-logo log-div">
            <a href="">
                <img src="img/login.jpg" alt="Angers">
            </a>
        </div>
        <div class="title-nav">
            <div class="page-header page-header-div">
                <h1>下单页面</h1>
            </div>
            <div class="admin-center">
                <img src="http://ZHA-ITA077-w7/${customer.avatar}" alt="..." class="img-rounded" height="70" width="70">
                <!-- Split button -->
                <div class="btn-group user-center-btn-group">
                    <button type="button" class="btn btn-primary btn-lg">UserName</button>
                    <button type="button" class="btn btn-primary btn-lg dropdown-toggle  " data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">UserCenter</a></li>
                        <li><a href="#">AddressManager</a></li>
                        <li><a href="#">Change Avater</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Log Out</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 菜单栏-->
    <div class="bottom-menu-operationarea">
        <div id="left-menu-log" class="mac-main-nav menu-div">
            <!--选项栏-->
            <div class="console-menu">
                <ul class="nav nav-pills nav-stacked">
                    <li crole="presentation" class="menu-li active"><a href="merchantList.jsp">HomePage</a></li>
                    <li role="presentation" class="menu-li"><a href="orderList.jsp">Orger Page</a></li>
                </ul>
            </div>
        </div>
        <div class="operationarea">
            <div id="show-merchant-comment-area">
                <div id="placeOrderPage" style="margin: 100px auto; width: 700px;">
                    <div id="addressContainer">

                    </div>
                    <button class="btn btn-default" id="showAddAddressBtn">添加</button>

                    <div class="orderContainer">
                        <table class="table table-bordered table-hover" id="tableId">
                            <thead>
                            <tr>
                                <th>名字</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>图片</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${orderList}" var="item">
                                <tr>
                                    <td>${item.name}</td>
                                    <td>${item.price}</td>
                                    <td>${item.amount}</td>
                                    <td><img src="http://ZHA-ITA077-w7/${item.imgPath}" style="width: 70px; height: 70px"></td>
                                </tr>
                            </c:forEach>
                            <tr>
                                <td colspan="4"><span style="float: right; margin-right: 10px">总价：<span id="totalPrice"></span></span></td>
                            </tr>
                            </tbody>
                        </table>

                        <div>
                            <button class="btn btn-primary" style="float: right; padding: 6px 36px" id="buyBtn">购买</button>
                        </div>
                    </div>

                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">修改地址</h4>
                                </div>
                                <div class="modal-body">
                                    地址 : <input type="text" id="addressText">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" id="saveAddress">修改</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="addAddressDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="addAddressLabel">添加地址</h4>
                                </div>
                                <div class="modal-body">
                                    地址 : <input type="text" id="addAddressText">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" id="addAddressBtn">添加</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>

<script type="text/javascript" src="js/urlUtil.js"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<script>
    function AddressComponent(template){
        var model = [];
        var self = this;

        this.findAddress = function(){
            j.ajax("GET","orderAddress",null,null,this,function(data){
                model=data;
                _render(model);
            });
        };

        this.addAddress = function (name) {
            var address = {name: name};
            j.ajax("POST", "customer/address", address, {"Content-Type":"application/json"}, null, function (data) {
                _render(data);
                $("#addAddressDialog").modal("hide");
            })
        };

        this.updateDefaultAddress = function (address) {
            j.ajax("PATCH", "customer/address", address, {"Content-Type":"application/json"}, null, function (data) {
                _render(data);
            })
        };

        this.updateAddress = function (oldValue, newValue) {
            var updateValue = {oldValue: oldValue, newValue: newValue};
            j.ajaxWithOutJson("PUT", "customer/address", updateValue, null, null, function (data) {
                _render(data);
                $("#myModal").modal("hide");
            })
        };

        this.deleteAddress = function (addressName) {
            address = {name: addressName};
            j.ajax("DELETE","customer/address", address, {"Content-Type":"application/json"}, null, function (data) {
                _render(data);
            })
        };

        function _render(data) {
            template.empty();
            var defaultAddress = {};
            var otherAddress = [];
            data.forEach(function (item) {
                if(item.isDefaultAddress){
                    defaultAddress = item;
                }else{
                    otherAddress.push(item);
                }
            });

            if(!defaultAddress.name){
                var defaultAddressRoot = $('<div class="defaultAddress"></div>');
                template.append(defaultAddressRoot);
                var operator = $('<span class="addressOperator"></span>');
                defaultAddressRoot.append(operator);
                operator.append('<span id="showAddressId" style="cursor: pointer" class="glyphicon glyphicon-chevron-down"></span>');
            }else {
                var defaultAddressRoot = $('<div class="defaultAddress"></div>');
                template.append(defaultAddressRoot);
                defaultAddressRoot.append('<span class="addressLabel">' + defaultAddress.name + '</span>');
                var operator = $('<span class="addressOperator"></span>');

                defaultAddressRoot.append(operator);
                operator.append('<button class="btn btn-default btn-xs edit_btn" data-id="' + defaultAddress.name + '">修改</button>');
                operator.append('<span style="cursor: pointer" class="glyphicon glyphicon-remove deleteBtn" data-id="' + defaultAddress.name + '"></span>');
                operator.append('<span id="showAddressId" style="cursor: pointer" class="glyphicon glyphicon-chevron-down"></span>');
                defaultAddressRoot.append('<div style="clear: both"></div>');
            }


            if(otherAddress.length > 0){
                var otherAddressRoot = $('<ul>');
                otherAddress.forEach(function (item) {
                    var itemNode = $("<li>");
                    otherAddressRoot.append(itemNode);
                    itemNode.append('<span class="addressLabel">' + item.name + '</span>');
                    var itemOperator = $('<span class="addressOperator">');
                    itemNode.append(itemOperator);
                    itemOperator.append('<button class="btn btn-default btn-xs edit_btn" data-id="' + item.name + '">修改</button>');
                    itemOperator.append('<span><button class="btn btn-default btn-xs set_default_btn" data-id="' + item.name + '">设为默认</button></span>');
                    itemOperator.append('<span style="cursor: pointer" class="glyphicon glyphicon-remove deleteBtn" data-id="' + item.name + '"></span>');
                    itemNode.append('<div style="clear: both"></div>');
                });
                template.append(otherAddressRoot);
            }

            $("#showAddressId").on("click", function () {
                $("#addressContainer ul").toggle();
            });

            $("button:contains('修改')").on("click", function () {
                $("#addressText").val($(this).data("id"));
                $("#addressText").attr("name", $(this).data("id"));
                $("#myModal").modal("show");
            });

            $("button:contains('设为默认')").on("click", function () {
                var name = $(this).data("id");
                var address = {name: name};
                self.updateDefaultAddress(address);
            });

            $(".deleteBtn").on("click", function () {
                var addressName = $(this).data("id");
                self.deleteAddress(addressName);
            });
        }
    }

    $(function () {
        var a = new AddressComponent($("#addressContainer"));
        a.findAddress();

        $("#saveAddress").on("click", function () {
            var oldValue = $("#addressText").attr("name");
            var newValue = $("#addressText").val();

            a.updateAddress(oldValue, newValue);
        });

        $("#showAddAddressBtn").on("click", function () {
           $("#addAddressText").val("");
           $("#addAddressDialog").modal("show");
        });

        $("#addAddressBtn").on("click", function () {
            var name = $("#addAddressText").val();
            a.addAddress(name);
        });

        $("#buyBtn").on("click", function () {
            merchantId = {merchantId: getUrlParameter('merchantId')};
            j.ajaxWithOutJson("POST", "order", merchantId, null, null, function (data) {
                window.location.href = "orderItem?orderId=" + data;
            })
        });

        var count = function () {
            var sum = 0;
            var price;
            var amount;
            var tr = $("#tableId tbody tr");
            tr.each(function(index, item){
                var tds = $(item).children("td");
                if(tds.length > 1 ){
                    price = tds.eq(1).text();
                    amount = tds.eq(2).text();
                    sum += parseInt(parseInt(price) * parseInt(amount));
                }
            });
            $("#totalPrice").text(sum);
        };

        count();

    })
</script>
</html>
